/**
 * Created by user on 2017/6/5.
 */
$(function () {
    Vue.component('my-component',
        {
            template: '<p>Hi</p>'
        });

    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });

    var app2=new Vue({
        el:'#app-2',
        data:{
            message:'页面加载于 '+new Date()
        }
    });

    var app3=new Vue({
       el:'#app-3',
        data:{
           seen:false
        }
    });

    var app4=new Vue({
        el:'#app-4',
        data:{
            todos:[
                {text:'学习 JavaScript'},
                {text:'学习 Vue'},
                {text: '整个牛项目'}
            ]
        }
    });

    var app5=new Vue({
        el:'#app-5',
        data:{
            message:'hello Vue.js!'
        },
        methods:{
            reverseMessage:function () {
                this.message=this.message.split('').reverse().join('')
            }
        }
    });

    var app6=new Vue({
        el:'#app-6',
        data:{
            message:'Hello Vue!'
        }
    });
    Vue.component('todo-item', {
        // todo-item 组件现在接受一个
        // "prop"，类似于一个自定义属性
        // 这个属性名为 todo。
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    });
    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                { text: '蔬菜' },
                { text: '奶酪' },
                { text: '随便其他什么人吃的东西' }
            ]
        }
    });

    var vm=new Vue({
        el:'#example',
        data:{
            message:'Hello'
        },
        computed:{
            reversedMessage:function () {
                return this.message.split('').reverse().join('');
            }
        }

    });
/*
    console.log(vm.reversedMessage) // -> 'olleH'
    vm.message = 'Goodbye'
    console.log(vm.reversedMessage) // -> 'eybdooG'*/

    var app8=new Vue({
        el:'#app8',
        data:{
            isActive:true,
            hasError:true
        }
    });

    var app9=new Vue({
        el:'#app9',
        data:{
            isActive:true,
            activeClass:'active',
            errorClass:'text-danger'
        }
    });

    var app10=new Vue({
        el:'#app10',
        data:{
            activeClass:{
                active:true
            }
        }
    });

    var app11=new Vue({
        el:'#app11',
        data:{
            isActive:true
        }
    });



    var example2=new Vue({
        el:'#example-2',
        data:{
          name:'Vue.js'
        },
        methods:{
            greet:function (event) {
                alert('Hello '+this.name+'!');
                alert(event.target.tagName);
            }
        }
    });

    var example3=new Vue({
        el:'#example-3',
        methods:{
            say:function (message) {
                alert(message);
            }
        }
    });


    var data={counter:0}
    Vue.component('simple-counter',{

        template:'<button v-on:click="counter+=1">{{counter}}</button>',
        data:function () {
            return {counter:0}
        }
    })

    var example4=new Vue({
        el:'#example4'
    });

    Vue.component('child',{
       props:['myMessage'],
        template:'<span>{{myMessage}}</span>'
    });
    var example5=new Vue({
        el:'#example-5'
    });



});
